<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>APP</title>
		<link href="css/weui.min.css" rel="stylesheet" />
		<link href="css/jquery-weui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="css/flex.css" rel="stylesheet" />
		<link href="fonts/iconfont.css" rel="stylesheet" />
		<script src="js/immersed.js"></script>
	</head>
	<script>
		var statusHeight = STATUSBAR_HEIGHT + 44 + 40;
		var tabsTop = STATUSBAR_HEIGHT + 44;
		var styleObj = document.createElement('style');
		styleObj.type = 'text/css';
		styleObj.innerHTML = ".status-bar-height{height:" + statusHeight + "px}.tabs-nav{top:" + tabsTop + "px;}.order-by,.saixuan{top:" + statusHeight + "px}";
		document.getElementsByTagName('HEAD').item(0).appendChild(styleObj);
	</script>
	<style>
		body {
			background-color: #eee;
		}
		
		.tabs-nav {
			position: fixed;
			left: 0;
			width: 100%;
			height: 41px;
			background-color: #f4f4f4;
			z-index: 1;
		}
		
		.tabs-nav .item {
			text-align: center;
			line-height: 41px;
			font-size: 15px;
			color: #666;
			display: block;
		}
		
		.tabs-nav .item.active {
			border-bottom: #BD2C00 2px solid;
			color: #BD2C00
		}
		
		.time {
			float: right;
			font-size: 12px;
			color: #999;
			border-radius: 2px;
		}
		
		.order-by,
		.saixuan {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			background-color: rgba(0, 0, 0, .5);
			z-index: 1000;
		}
		
		.order-by .weui-cell__bd,
		.saixuan .weui-label {
			font-size: 16px;
		}
		
		.weui-cell.active {
			color: #ff0000
		}
		
		/*goods-item*/
		
		.goods-item-box {
            width: 50%;
            float: left;
            background-color: #fff
        }
        
        .goods-item-box>div {
            padding: 5px;
        }
        
        .goods-item-box .title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 15px;
            line-height: 30px
        }
        
        .goods-item-box .footer {
            position: relative;
        }
        
        .goods-item-box .footer .price {
            color: #ff0000;
            font-size: 16px;
        }
        
        .goods-item-box .footer .time {
            position: absolute;
            right: 0;
            top: 8px;
            font-size: 10px;
            color: #999
        }
        
        .goods-item-box .img {
            position: relative;
        }
        
        .goods-item-box .img img {
            width: 100%;
            display: block
        }
        
        .goods-item-box .img .icon-videofill {
            position: absolute;
            right: 10px;
            bottom: 10px;
            width: 30px;
            height: 30px;
            text-align: center;
            background-color: rgba(255, 255, 255, .5);
            border-radius: 50%;
            font-size: 25px;
            line-height: 33px;
        }
	</style>

	<body>
		<div id="app">
			<div class="xiaoyi-header header-red" id="header">
				<div class="xiaoyi-header-left"><i class="iconfont icon-back" onclick="wsClose()"></i></div>
				<div class="xiaoyi-header-title" v-html="k"></div>
				<!--<div class="xiaoyi-header-right"><i class="iconfont icon-search"></i></div>-->
			</div>
			<div class="tabs-nav line-bottom" flex="box:mean">
				<a href="javascript:;" class="item line-right" @click="orderBy?orderBy=false:orderBy=true" v-html="orderTitle"></a>
				<a href="javascript:;" class="item" @click="saixuanBy?saixuanBy=false:saixuanBy=true">价格筛选</a>
			</div>

			<div class="order-by" v-show="orderBy" @click="maskClick" style="display: none;">
				<div class="weui-cells" style="margin-top: 0;">
					<a class="weui-cell weui-cell_access" :class="{'active':vo.active}" href="javascript:;" @click="selectOrder(index)" v-for="(vo,index) in orderList">
						<div class="weui-cell__bd">
							<p>{{vo.title}}</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>

				</div>
			</div>

			<div class="saixuan" @click="maskClick" v-show="saixuanBy" style="display: none;">
				<div style="background-color: #fff;">
					<div class="weui-cells weui-cells_form" style="margin-top: 0;">
						<div class="weui-cell">
							<div class="weui-cell__hd"><label class="weui-label">起始价格</label></div>
							<div class="weui-cell__bd">
								<input class="weui-input" type="number" name="price_start" pattern="[0-9]*" placeholder="请输入起始价格">
							</div>
						</div>
						<div class="weui-cell">
							<div class="weui-cell__hd"><label class="weui-label">结束价格</label></div>
							<div class="weui-cell__bd">
								<input class="weui-input" type="number" name="price_end" pattern="[0-9]*" placeholder="请输入结束价格">
							</div>
						</div>
					</div>
					<div class="weui-btn-area" style="text-align: center; height: 60px;">
						<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default" style="margin-right: 30px;" @click="jiageSave()">确 定</a>
						<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default" @click="jiageClear()">取 消</a>
					</div>
				</div>
			</div>

			<div class="status-bar-height"></div>

			<!--<template v-for=" (vo,index) in items ">
				<div class="goods-item line-bottom" @click="showGoods(vo.id)">
					<div class="title" v-html="vo.title"></div>
					<div class="brief" v-html="vo.brief"></div>
					<div class="price"><span>成本价：</span>&yen;{{vo.cost}}<span style="margin-left: 20px;">珠宝玉石价：</span>&yen;{{vo.price}}</div>
					<div class="pics">
						<div class="img" v-for="(v,index) in vo.pics ">
							<img class="lazy" :data-original="v+'@!200x200'" src="images/nopic.gif" v-if="index < 4">
						</div>
						<div style="clear: both;"></div>
					</div>
					<div class="tools" flex="">
						<span flex-box="0" class="time">{{vo.time}}</span>
						<span flex-box="1"></span>
						<span flex-box="0" class="favor" @click.stop="favor(vo.id,index)" v-if="vo.is_favor != null" style="color: #45a75c;"><i class="iconfont icon-favorfill"></i> 收藏</span>
						<span flex-box="0" class="favor" @click.stop="favor(vo.id,index)" v-else><i class="iconfont icon-favor"></i> 收藏</span>
						<span flex-box="0" class="share" @click.stop="share(index)"><i class="iconfont icon-share"></i> 转发</span>
					</div>
				</div>
			</template>-->
			
			<div style="background-color:#fff" v-if="items.length>0">
            <template v-for=" (vo,index) in items "> 
            
            <div class="goods-item-box" @click="showGoods(vo.id,vo.title)">
                <div>
                    <div class="img">
                        <img class="lazy" :data-original="vo.pics[0]+'@!400x400'" src="images/nopic.gif">
                        <i class="iconfont icon-videofill" v-if="vo.video_id>0"></i>
                    </div>
                    <div class="title">{{vo.title}}</div>
                    <div class="footer">
                        <span class="price">&yen;{{vo.cost}}</span>
                        <span class="time">{{vo.time}}</span>
                    </div>
                </div>
            </div>
           </template>

            <div style="clear:both"></div>
            </div>

			<template v-if="loading == 'inits'">
				<div flex="main:center cross:center" style="width:100%; height: 400px; ">
					<div class="jushi-loader">Loading...</div>
				</div>
			</template>

			<template v-if="loading == 'nodata'">
				<div flex="main:center cross:center" style="width:100%; height: 400px; ">
					<img src="images/nodata.png" style="width: 150px;">
				</div>
			</template>

			<template v-if="loading == 'more'">
				<div class="weui-loadmore">
					<i class="weui-loading"></i>
					<span class="weui-loadmore__tips">加载更多</span>
				</div>
			</template>

			<template v-if="loading == 'more_nodata'">
				<div class="weui-loadmore weui-loadmore_line">
					<span class="weui-loadmore__tips" style="background: #eee;">没有啦</span>
				</div>
			</template>
		</div>

		<div id="toTop" onclick="Top()">
			<i class="iconfont icon-top"></i>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.4.js"></script>
		<script src="js/jquery-weui.min.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/smarge.js"></script>
		<script src="js/jquery.lazyload.js"></script>
		<script src="js/systemShare.js"></script>
		<script src="js/wxShare.js"></script>
		<script src="js/md5.min.js"></script>
		<script src="js/common.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();

			mui.plusReady(function() {

				var keyword = getQueryString('k');
				if(!keyword) {
					keyword = Smarge.get('search_keyword');
				}

				var vm = new Vue({
					el: "#app",
					data: {
						items: [],
						loading: 'inits',
						k: keyword,
						p: 1,
						r: 10,
						order_field: 'audit_time',
						order_type: 'desc',
						price_start: '0',
						price_end: '1000000000',
						saixuanBy: false,
						orderBy: false,
						orderTitle: '新品优先',
						orderList: [{
								title: '新品优先',
								id: 'new',
								active: true
							},
							{
								title: '价高优先',
								id: 'priceDesc',
								active: false
							},
							{
								title: '价低优先',
								id: 'priceAsc',
								active: false
							},
						]
					},
					mounted: function() {
						this.inits();
					},
					methods: {
						inits: function() {
							var vm = this;
							vm.items = [];
							Get(SERVER_URL + "&c=Goods&a=search", {
								p: 1,
								r: vm.r,
								k: vm.k,
								order_field: vm.order_field,
								order_type: vm.order_type,
								price_start: vm.price_start,
								price_end: vm.price_end,
							}, function(data) {
								if(data.status) {
									vm.items = data.info;
									vm.loading = 'more';
									vm.p=2;
									setTimeout(function() {
										$("img.lazy").lazyload({
											container: $(document.body),
											threshold: 200,
										});
									}, 200)
								} else {
									vm.loading = 'nodata';
								}
							})

							$(document.body).infinite(150).on("infinite", function() {
								var self = this;
								if(self.loading) return;
								self.loading = true;

								Get(SERVER_URL + "&c=Goods&a=search", {
									p: vm.p,
									r: vm.r,
									k: vm.k,
									order_field: vm.order_field,
									order_type: vm.order_type,
									price_start: vm.price_start,
									price_end: vm.price_end,
								}, function(data) {
									if(data.status) {
										for(var i in data.info) {
											vm.items.push(data.info[i]);
										}
										vm.p++;
										self.loading = false;
										setTimeout(function() {
											$("img.lazy").lazyload({
												container: $(document.body),
												threshold: 200,
											});
										}, 100)
									} else {
										vm.loading = 'more_nodata';
										self.loading = false;
									}

								})

							});
							$(document).scroll(function() {
								var scrollTop = $(this).scrollTop();
								if(scrollTop > 1500) {
									$("#toTop").show();
								} else {
									$("#toTop").hide();
								}
							});
						},
						maskClick: function(e) {
							var vm = this;
							if(e.target._prevClass == 'order-by') {
								vm.orderBy = false
							}
							if(e.target._prevClass == 'saixuan') {
								vm.saixuanBy = false
							}
						},
						showGoods: function(id) {
							clicked('goods_details.html?id=' + id, 'pop-in');
						},
						favor: function(id, index) {
							Get(SERVER_URL + "&c=Favor&a=setFavor", {
								id: id
							}, function(data) {
								if(data.status) {
									if(data.info == 'add') {
										vm.$set(vm.items[index], 'is_favor', 1)
									}

									if(data.info == 'delete') {
										vm.$set(vm.items[index], 'is_favor', null)
									}
									//plus.webview.getWebviewById('favor').evalJS("getInits()");
								}
							})
						},
						selectOrder: function(index) {
							var vm = this;
							vm.orderBy = false
							if(vm.orderList[index].active) {
								return false;
							}
							vm.orderList.map(function(v, i) {
								if(i == index) {
									var id = vm.orderList[i].id;
									vm.orderTitle = vm.orderList[i].title
									vm.orderList[i].active = true;
									if(id == 'new') {
										vm.order_field = 'audit_time';
										vm.order_type = 'desc';
									}
									if(id == 'priceDesc') {
										vm.order_field = 'cost';
										vm.order_type = 'desc';
									}
									if(id == 'priceAsc') {
										vm.order_field = 'cost';
										vm.order_type = 'asc';
									}
								} else {
									vm.orderList[i].active = false;
								}
							})

						},
						jiageSave: function() {
							var vm = this;
							var price_start = $.trim($('input[name=price_start]').val());
							var price_end = $.trim($('input[name=price_end]').val());
							vm.saixuanBy = false;
							if(!price_start) {
								vm.price_start = '0'
							} else {
								vm.price_start = price_start
							}
							if(!price_end) {
								vm.price_end = '1000000000'
							} else {
								vm.price_end = price_end
							}
						},
						jiageClear: function() {
							vm.saixuanBy = false;
							vm.price_start = '0'
							vm.price_end = '1000000000'
						},
						share: function(index) {
							var vm = this;
							var goodsInfo = vm.items[index]
							if(plus.os.name == 'Android') {
								plus.nativeUI.actionSheet({
									title: "分享",
									cancel: "取消",
									buttons: [{
										title: "一键转发"
									}, {
										title: "转发链接"
									}, {
										title: "下载组图"
									}, {
										title: "复制描述"
									}]
								}, function(e) {
									var index = e.index;
									switch(index) {
										case 0:
											break;
										case 1:
											easyShare(goodsInfo.pics, '【价格】' + goodsInfo.cost + '\n【描述】' + goodsInfo.brief);
											break;
										case 2:
											shareLink(goodsInfo.brief + ',' + goodsInfo.cost + '元', goodsInfo.pics[0], "http://shop.51jushi.com/index.php?m=Store&c=index&a=goods&id=" + goodsInfo.id);
											break;
										case 3:
											DownloadPics(goodsInfo.pics)
											break;
										case 4:
											copyToClip('【标题】' + goodsInfo.title + '\n【价格】' + goodsInfo.cost + '\n【描述】' + goodsInfo.brief);
											break;
										default:
											// 其它
											break;
									}
								});
							}

							if(plus.os.name == 'iOS') {
								plus.nativeUI.actionSheet({
									title: "分享",
									cancel: "取消",
									buttons: [{
											title: "一键转发"
										},
										{
											title: "转发链接"
										},
										{
											title: "下载组图"
										},
										{
											title: "复制描述"
										}
									]
								}, function(e) {
									var index = e.index;
									switch(index) {
										case 0:
											break;
										case 1:
											copyToClip('【标题】' + goodsInfo.title + '\n【价格】' + goodsInfo.cost + '\n【描述】' + goodsInfo.brief);
											jushiShare.share(goodsInfo.pics)
											break;
										case 2:
											jushiShare.share(goodsInfo.pics[0], "http://shop.51jushi.com/index.php?m=Store&c=index&a=goods&id=" + goodsInfo.id, goodsInfo.brief + ',' + goodsInfo.cost + '元')
											break;
										case 3:
											DownloadPics(goodsInfo.pics)
											break;
										case 4:
											copyToClip('【标题】' + goodsInfo.title + '\n【价格】' + goodsInfo.cost + '\n【描述】' + goodsInfo.brief);
											break;
										default:
											// 其它
											break;
									}
								});
							}
						}
					},
					watch: {
						saixuanBy: function(val) {
							if(val) {
								vm.orderBy = false
							}
						},
						orderBy: function(val) {
							if(val) {
								vm.saixuanBy = false
							}
						},
						order_field: function() {
							vm.loading = 'inits';
							this.inits();
						},
						order_type: function() {
							vm.loading = 'inits';
							this.inits();
						},
						price_start: function() {
							vm.loading = 'inits';
							this.inits();
						},
						price_end: function() {
							vm.loading = 'inits';
							this.inits();
						}
					}
				})

			});
		</script>
	</body>

</html>